<template>
    <Head/>
    <div id="fbrId" style="padding-top: 10px">
        <el-affix :offset="100">
            <el-button type="primary"  @click="showFbn">指板图</el-button>
        </el-affix>
        <el-row>
            <el-col :md="12" :offset="6">
                <h2 style="text-align: center">指板音符记忆</h2>
            </el-col>
            <el-col :md="6"></el-col>
            <el-col :md="22" :offset="1" v-show="fbnShow">
                <el-image src="/image/fbn.png"></el-image>
            </el-col>
            <el-col :md="12" :offset="6">
                <el-card class="box-card">
                    <el-space wrap>
                        <h3>设置</h3>
                        组合:
                        <el-select v-model="setting.nodeType" placeholder="音符组合形式"
                                   style="width: 80px">
                            <el-option label="混合" :value="0"></el-option>
                            <el-option label="原音" :value="1"></el-option>
                            <el-option label="升号" :value="2"></el-option>
                            <el-option label="降号" :value="3"></el-option>
                        </el-select>
                        bpm
                        <el-input v-model="setting.bpm" style="width: 70px"></el-input>
                        组数:
                        <el-select v-model="setting.groups" placeholder="音符组合形式"
                                   style="width: 70px">
                            <el-option label="5" :value="5"></el-option>
                            <el-option label="10" :value="10"></el-option>
                            <el-option label="20" :value="20"></el-option>
                            <el-option label="无限" :value="999"></el-option>
                        </el-select>
                        <el-button type="primary" @click="play">开始</el-button>
                        <el-button type="danger" @click="stop">停止</el-button>
                    </el-space>
                </el-card>
            </el-col>
            <el-col :md="6"></el-col>
            <el-col :md="12" :offset="6" style="padding-top: 20px;">
                <el-card class="box-card" style="text-align: center">
                    <template #header>
                        <div class="card-header">
                            <span>第{{group}}组 {{index}}个音</span>
                            <audio ref='audio' muted="muted">
                                <source type="audio/mpeg">
                            </audio>
                            <!--<audio src="../assets/audio/{{this.noteNow}}.wmv" controls="controls"></audio>-->
                        </div>
                    </template>
                    <span class="note-play">{{noteNow}}</span>
                </el-card>

            </el-col>
        </el-row>
    </div>
</template>
<script>
    import Head from './Head'

    const allNotes = ["C", "D", "E", "F", "G", "A", "B", "#C", "#D", "#E", "#F", "#G", "#A", "#B", "♭C", "♭D", "♭E", "♭F", "♭G", "♭A", "♭B"];
    const notes = ["C", "D", "E", "F", "G", "A", "B"];
    const sharpNotes = ["#C", "#D", "#E", "#F", "#G", "#A", "#B"];
    const flatNotes = ["♭C", "♭D", "♭E", "♭F", "♭G", "♭A", "♭B"];
    let lastInt = -1;

    export default {
        name: 'fbr',
        el: '#fbrId',
        components: {
            Head
        },
        data() {
            return {
                noteNow: '🎸',
                setting: {
                    bpm: 30,
                    nodeType: 0,
                    groups: 5
                },
                isPlay: false,
                time: 1,
                group: 1,
                index: 1,
                fbnShow: false
            }
        },
        methods: {
            async play() {
                console.log("开始播放");
                this.isPlay = true;
                // for (let num = 3; num >= 1; num--) {
                //     this.noteNow = num;
                //     await this.sleep(1000);
                // }
                for (; this.time < this.setting.groups * 7; this.time++) {
                    if (!this.isPlay)
                        break;
                    let index = this.getIndex();
                    if (this.setting.nodeType === 0)
                        this.noteNow = allNotes[index];
                    if (this.setting.nodeType === 1)
                        this.noteNow = notes[index];
                    if (this.setting.nodeType === 2)
                        this.noteNow = sharpNotes[index];
                    if (this.setting.nodeType === 3)
                        this.noteNow = flatNotes[index];
                    let nPath = ("/audio/" + this.noteNow + ".mp3").replace("#", "s");
                    console.log(nPath);
                    let audio = new Audio(nPath);
                    audio.play();
                    // this.$refs.audio.src = this.alarmSrc[0].src;
                    // this.$refs.audio.play();
                    console.log("time:" + this.time + ",音符：" + this.noteNow);
                    if (this.time % 7 === 0) {
                        this.group++;
                        this.index = 1;
                    } else {
                        this.index++;
                    }
                    await this.sleep(60000 / this.setting.bpm);
                }
                console.log("播放完成");
                this.stop();
            },
            getIndex() {
                let length = this.setting.nodeType === 0 ? 21 : 7;
                while (true) {
                    let index = parseInt(Math.random() * length);
                    if (index === lastInt)
                        continue;
                    lastInt = index;
                    return index;
                }
            },
            sleep(ms) {
                return new Promise(resolve => setTimeout(resolve, ms))
            },
            stop() {
                this.isPlay = false;
                this.noteNow = "🎸";
                this.time = 1;
                this.group = 1;
                this.index = 1;
            },
            showFbn() {
                this.fbnShow = !this.fbnShow;
                console.log(this.fbnShow);
            }
        }
    }
</script>
<style>
    .note-play {
        font-size: 200px;
        color: teal;
        font-family: 'PingFang SC', 'Hiragino Sans GB',
        'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    }
</style>